<template>
  <div class="cooling-pump">
    <q-card>
      <q-card-section class="row items-center header">
        <div class="text-h6">{{title}}</div>
        <q-space />
        <q-btn icon="close" flat round dense v-close-popup />
      </q-card-section>
      <q-separator />
      <q-card-section>
        <q-tabs
          v-model="activeName"
          dense
          class="bg-grey-2 text-teal"
          active-color="primary"
          indicator-color="primary"
          align="justify"
          narrow-indicator
        >
          <q-tab
            :name="item.name"
            :label="item.name"
            v-for="item in equipment"
            :key="item.name"
            @click="handleClick(item.name)"
          />
        </q-tabs>
        <!-- <q-separator /> -->
        <q-tab-panels
          v-model="activeName"
          animated
          transition-prev="fade"
          transition-next="fade"
          style="max-height: 600px;"
          class="scroll"
        >
          <q-tab-panel :name="item.name" v-for="item in equipment" :key="item.name">
            <div v-if="item.name != '所有'" style=" padding-left:20px">
              <div style=" padding-left:30px">
                <el-form
                  v-loading="dialogLoading"
                  ref="item"
                  :model="item"
                  label-width="90px"
                  size="mini"
                  inline
                  :label-position="'right'"
                >
                  <el-row>
                    <el-col :span="12">
                      <el-form-item prop="templateId" label="运行状态">{{item.WP_PWR!=0?'运行':'停止'}}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="title" label="启动频率">反馈值 {{item.WP_FRQ}}Hz</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item prop="templateId" label="远程/就地">就地</el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="title" label=" ">设定值 {{item.WP_FRQ_SET}}Hz</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item
                        prop="templateId"
                        label="报警与否"
                        :style="{color:((item.WP_VFD_ALM?item.WP_VFD_ALM:'否')=='是'?'#ED4A4B':'')}"
                      >{{item.WP_VFD_ALM?item.WP_VFD_ALM:'否'}}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="templateId" label="是否启用">{{item.WP_PWR!=0?'是':'否'}}</el-form-item>
                    </el-col>
                  </el-row>
                  <div class="middle">
                    <div style="width: 310px; clear: both;float: left">
                      <table
                        style="line-height:35px;
    border: 1px solid #eee;border-radius: 5px;"
                        border="0"
                        cellpadding="0"
                        cellspacing="0"
                      >
                        <tr
                          style="background-color: #FFFFFF; background-color:#EFEFEF; font-size: 16px"
                        >
                          <td colspan="2">&nbsp;&nbsp;参数名称</td>
                        </tr>
                        <tr style="background-color: #FFFFFF;">
                          <td width="210">&nbsp;&nbsp;功率</td>
                          <td width="100">&nbsp;&nbsp;{{item.WP_PWR}}kW</td>
                        </tr>
                        <tr style="background-color:#F7FAFC;">
                          <td width="210">&nbsp;&nbsp;频率</td>
                          <td width="100">&nbsp;&nbsp;{{item.WP_FRQ}}Hz</td>
                        </tr>
                        <tr style="background-color: #FFFFFF;">
                          <td width="210">&nbsp;&nbsp;运行时间</td>
                          <td width="100">&nbsp;&nbsp;{{item.WP_HRS}}H</td>
                        </tr>
                        <tr style="background-color: #F7FAFC;">
                          <td width="210">&nbsp;&nbsp;出口压力</td>
                          <td width="100">&nbsp;&nbsp;{{item.WP_DISP}}kPa</td>
                        </tr>
                      </table>
                    </div>
                    <div style="width: 200px; float: right; padding: 30px 120px 0 0">
                      <img src="/statics/topo/cold-tools/lqb.png" />
                    </div>
                  </div>
                </el-form>
              </div>
            </div>
            <el-table v-else :data="tableData" :span-method="objectSpanMethod" height="300">
              <el-table-column fixed prop="equipment" label="分类" width="120"></el-table-column>
              <el-table-column prop="name" label="参数名称" width="120"></el-table-column>
              <el-table-column
                v-for="item in runNOs"
                :key="item"
                :prop="`NO`+item"
                :label="item+`#`"
                width="150"
              ></el-table-column>
            </el-table>
          </q-tab-panel>
        </q-tab-panels>
      </q-card-section>
      <q-separator />
      <q-card-actions align="center">
        <q-btn color="primary" size="xs" label="关 闭" v-close-popup />
      </q-card-actions>
    </q-card>
  </div>
</template>

<script>
import { lastChar, firstChar } from "@/assets/libs/utils.js";
export default {
  props: {
    //数据项
    dialogData: {
      type: Object,
      default: { text: "", dataList: [] }
    },
    //当前选中组件的索引
    index: {
      type: Number,
      default: 0
    },
    // 组件数量
    nums: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      equipment: [],
      NO: 0,
      dialogLoading: false,
      tableData: [
        {
          equipment: '设置状态',
          name: '运行状态', NO1: '停止', NO2: '停止', NO3: '停止', NO4: '停止', NO5: '否'
        }, {
          equipment: '设置状态',
          name: '远程/就地', NO1: '就地', NO2: '就地', NO3: '就地', NO4: '就地', NO5: '就地'
        }, {
          equipment: '设置状态',
          name: '是否启用', NO1: '否', NO2: '否', NO3: '否', NO4: '否', NO5: '否'
        }, {
          equipment: '设置状态',
          name: '报警与否', NO1: '否', NO2: '否', NO3: '否', NO4: '否', NO5: '否'
        }, {
          equipment: '参数名称',
          name: '功率(kW)', NO1: 0, NO2: 0, NO3: 0, NO4: 0, NO5: 0
        }, {
          equipment: '参数名称',
          name: '频率(Hz)', NO1: 0, NO2: 0, NO3: 0, NO4: 0, NO5: 0
        }, {
          equipment: '参数名称',
          name: '运行时间(H)', NO1: 0, NO2: 0, NO3: 0, NO4: 0, NO5: 0
        }, {
          equipment: '参数名称',
          name: '出口压力(kPa)', NO1: 0, NO2: 0, NO3: 0, NO4: 0, NO5: 0
        }],
      activeName: "",
      runNOs: []
    };
  },
  computed: {
    title () {
      return this.dialogData.text ? this.dialogData.text.substr(2, 3) : '';
    }
  },
  watch: {
    dialogData: {
      handler (val) {
        // console.log('val :', val);
        this.refreshData(val);
      },
      deep: true
    }
  },
  created () {
    if (this.index) {
      this.NO = this.index;
    }
    this.activeName = this.dialogData.text;
    this.refreshData(this.dialogData);
    console.log('this.nums :', this.nums);
    if (this.nums > 0) {
      for (let i = 1; i <= this.nums; i++) {
        this.runNOs.push(i);
      }
    }
  },
  methods: {
    refreshData (val) {
      let name = val.text.substring(2, 5);
      //   this.activeName = val.text;
      this.equipment = [];

      for (let i = 1; i <= this.nums; i++) {
        let item = { name: "", WP_PWR: 0, WP_FRQ: 0, WP_HRS: 0, WP_DISP: 0, WP_REM_LOC: 0, WP_FRQ_SET: 0 };
        item.name = i + "#" + name;
        this.equipment.push(item);
      }
      let item = { name: "所有", WP_PWR: 0, WP_FRQ: 0, WP_HRS: 0, WP_DISP: 0, WP_REM_LOC: 0, WP_FRQ_SET: 0 };
      this.equipment.push(item);
      this.getSketchMap(this.NO);
    },
    handleClick (name) {
      this.activeName = name;
      console.log("activeName :", this.activeName);
      if (name == "所有") {
        // return;
        this.NO = this.equipment.length + 1;
      } else {
        let tindex = firstChar(name);
        this.NO = parseInt(tindex);
      }
      this.getSketchMap(this.NO);
    },
    getSketchMap (NO) {
      let address, val = 0;
      for (let i = 0; i < this.dialogData.dataList.length; i++) {
        let obji = this.dialogData.dataList[i];
        address = obji.Address; val = obji.val;
        if (!address) { continue; }

        if (this.dialogData.text.indexOf('冷却泵') > -1) {
          if (address.indexOf('CWP' + NO + '_PWR') > -1) {
            this.equipment[NO - 1].WP_PWR = val;
          }
          else if (address.indexOf('CWP' + NO + '_FRQ_SET') > -1 && address.length == 12) {
            this.equipment[NO - 1].WP_FRQ_SET = val;
          }
          else if (address.indexOf('CWP' + NO + '_FRQ_SET') > -1 && address.length == 12) {
            this.equipment[NO - 1].WP_FRQ_SET = val;
          }
          else if (address.indexOf('CWP' + NO + '_FRQ_HAND_AUTO') > -1 && address.length == 18) {
            this.equipment[NO - 1].WP_FRQ_HAND_AUTO = val;
          }
          else if (address.indexOf('CWP' + NO + '_FRQ') > -1 && address.length == 8) {
            this.equipment[NO - 1].WP_FRQ = val;
          }
          else if (address.indexOf('CWP' + NO + '_HRS') > -1) {
            this.equipment[NO - 1].WP_HRS = val;
          }
          else if (address.indexOf('CWP' + NO + '_DISP') > -1) {
            this.equipment[NO - 1].WP_DISP = val;
          }
          else if (address.indexOf('CWP' + NO + '_FRQ_SET') > -1 && address.length == 12) {
            this.equipment[NO - 1].WP_FRQ_SET = val;
          }
          else if (address.indexOf('CWP' + NO + '_REM_LOC') > -1) {
            if (obji.val > 0) {
              this.equipment[NO - 1].WP_REM_LOC = '就地';
            }
          }
          else if (address.indexOf('CWP' + NO + '_VFD_ALM') > -1 && address.length == 12) {
            this.equipment[NO - 1].WP_VFD_ALM = val != 0 ? '是' : '否';
          }
          if (address.substring(0, 3).indexOf('CWP') > -1) {
            this.queryTable(address, val);
          }
        }
        else if (this.dialogData.text.indexOf('冷冻泵') > -1) {

          if (address.indexOf('CHWP' + NO + '_PWR') > -1) {
            this.equipment[NO - 1].WP_PWR = val;
          }
          else if (address.indexOf('CHWP' + NO + '_FRQ_SET') > -1 && address.length == 13) {
            this.equipment[NO - 1].WP_FRQ_SET = val;
          }
          else if (address.indexOf('CHWP' + NO + '_FRQ_HAND_AUTO') > -1 && address.length == 19) {
            this.equipment[NO - 1].WP_FRQ_HAND_AUTO = val;
          }
          else if (address.indexOf('CHWP' + NO + '_FRQ') > -1 && address.length == 9) {
            this.equipment[NO - 1].WP_FRQ = val;
          }
          else if (address.indexOf('CHWP' + NO + '_HRS') > -1) {
            this.equipment[NO - 1].WP_HRS = val;
          }
          else if (address.indexOf('CHWP' + NO + '_DISP') > -1) {
            this.equipment[NO - 1].WP_DISP = val;
          }
          else if (address.indexOf('CHWP' + NO + '_REM_LOC') > -1) {
            if (obji.val > 0) {
              this.equipment[NO - 1].WP_REM_LOC = '就地';
            }
          }
          else if (address.indexOf('CHWP' + NO + '_VFD_ALM') > -1 && address.length == 13) {
            this.equipment[NO - 1].WP_VFD_ALM = val != 0 ? '是' : '否';
          }
          if (address.substring(0, 4).indexOf('CHWP') > -1) {
            this.queryTable(address, val);
          }
        }
      }
    },
    queryTable (address, val) {
      let NO, NOdata;
      if (address.substring(0, 3) == "CWP") {
        NO = address.substring(3, 4);
        NOdata = 'NO' + NO;
        //  console.log(address + ";" + NO + ";" + NOdata);
        if (address.indexOf('CWP' + NO + '_PWR') > -1 && address.length == 8) {
          this.tableData[0][NOdata] = val != 0 ? '运行' : '停止';
        }
        else if (address.indexOf('CWP' + NO + 'REM_LOC') > -1) {
          this.tableData[1][NOdata] = val != 0 ? '远程' : '就地';
        }
        if (address.indexOf('CWP' + NO + '_PWR') > -1 && address.length == 8) {
          this.tableData[2][NOdata] = val != 0 ? '是' : '否';
        }
        if (address.indexOf('CWP' + NO + '_VFD_ALM') > -1 && address.length == 12) {
          this.tableData[3][NOdata] = val != 0 ? '是' : '否';
        }
        if (address.indexOf('CWP' + NO + '_PWR') > -1 && address.length == 8) {
          this.tableData[4][NOdata] = val;
        }
        else if (address.indexOf('CWP' + NO + '_FRQ') > -1 && address.length == 8) {
          this.tableData[5][NOdata] = val;
        }
        else if (address.indexOf('CWP' + NO + '_HRS') > -1) {
          this.tableData[6][NOdata] = val;
        }
        else if (address.indexOf('CWP' + NO + '_DISP') > -1) {
          this.tableData[7][NOdata] = val;
        }
      }
      else if (address.substring(0, 4) == "CHWP") {
        NO = address.substring(4, 5);
        NOdata = 'NO' + NO;
        // console.log(address + ";" + NO + ";" + NOdata);
        if (address.indexOf('CHWP' + NO + '_PWR') > -1 && address.length == 9) {
          this.tableData[0][NOdata] = val != 0 ? '运行' : '停止';
        }
        else if (address.indexOf('CHWP' + NO + 'REM_LOC') > -1) {
          this.tableData[1][NOdata] = val != 0 ? '远程' : '就地';
        }
        if (address.indexOf('CHWP' + NO + '_PWR') > -1 && address.length == 9) {
          this.tableData[2][NOdata] = val != 0 ? '是' : '否';
        }
        if (address.indexOf('CHWP' + NO + '_VFD_ALM') > -1 && address.length == 13) {
          this.tableData[3][NOdata] = val != 0 ? '是' : '否';
        }
        if (address.indexOf('CHWP' + NO + '_PWR') > -1 && address.length == 9) {
          this.tableData[4][NOdata] = val;
        }
        else if (address.indexOf('CHWP' + NO + '_FRQ') > -1 && address.length == 9) {
          this.tableData[5][NOdata] = val;
        }
        else if (address.indexOf('CHWP' + NO + '_HRS') > -1) {
          this.tableData[6][NOdata] = val;
        }
        else if (address.indexOf('CHWP' + NO + '_DISP') > -1) {
          this.tableData[7][NOdata] = val;
        }
      }

    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 4 === 0) {
          return {
            rowspan: 4,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
.cooling-pump {
  width: 760px;
  max-width: 80vw;
  .q-card {
    width: 760px;
  }
  /deep/ .q-panel.scroll {
    overflow-x: hidden;
  }
  /deep/ .q-btn {
    padding: 0px 12px;
  }
}
</style>
